<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comment</title>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!--<link rel="stylesheet" href="../layui/css/layui.mobile.css">-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body class="layui-layout-body">
<form class="layui-form" action="">
    <!--<div class="layui-form" action="" onsubmit="return false">-->
    <div>
        <table id="comment" lay-filter="comment"></table>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">评论</label>
        <div class="layui-input-block">
            <textarea name="comment_content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">评论</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/javascript">
        //Demo
        layui.use(['form','jquery'], function(){
            var form = layui.form;
            window.jQuery = window.$ = layui.jquery;

            //监听提交
            form.on('submit(formDemo)', function(data){

                layer.msg(JSON.stringify(data.field));
                $.post("http://localhost:8080/webDemo_war_exploded/CommentAddServlet",data.field,function(){
                    window.location.href="comment_post2.html";
                })
                return false;
            });
        });
        var tableInit = function(url) {
            layui.use(['table'], function () {
                var table = layui.table;
                table.render({
                    id: 'comment',
                    elem: '#comment'
                    , url: url //数据接口
                    ,parseData: function(res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "OK", //解析提示文本
                            "count": 100, //解析数据长度
                            "data": res //解析数据列表
                        };
                    }
                    //where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值
                    , where: {searchable: false, search: "something"}


                    , limit: 10//每页默认数
                    , limits: [10, 20, 30, 40] //分页的下拉框（即选择每页有多少条数据)
                    , page: true //开启分页
                    //表格属性
                    , cols: [
                        [ //第一列的复选框
                            {type: 'checkbox'}
                            // field用来指定该列对应的是json数据的哪一个属性
                            //          title表示列头的名称，sort表示该列是否开启排序
                            //, {field: 'user_id', width: 180, title: 'ID', sort: false}
                            , {field: 'dates', width: 180, title: '时间', sort: true}
                            , {field: 'comment_content', width: 180, title: '评论'}
                            //templet用来在做一些html的渲染，这里是id为sexTpl的script标签

                        ]
                    ]
                    // ,where: {timestamp: (new Date()).valueOf()}
                })
            });
        }
        tableInit("http://localhost:8080/webDemo_war_exploded/CommentServlet");
    </script>
</form>
</body>

<script>
    var tableInit = function(url) {
        layui.use(['table'], function () {
            var table = layui.table;
            table.render({
                id: 'comment',
                elem: '#comment'
                , url: url //数据接口
                //where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值
                , where: {searchable: false, search: "something"}


                , limit: 10//每页默认数
                , limits: [10, 20, 30, 40] //分页的下拉框（即选择每页有多少条数据)
                , page: true //开启分页
                //表格属性
                , cols: [
                    [ //第一列的复选框
                        {type: 'checkbox'}
                        // field用来指定该列对应的是json数据的哪一个属性
                        //          title表示列头的名称，sort表示该列是否开启排序
                        , {field: 'user_id', width: 180, title: 'ID', sort: false}
                        , {field: 'dates', width: 180, title: '时间', sort: true}
                        , {field: 'comment', width: 180, title: '评论'}
                        //templet用来在做一些html的渲染，这里是id为sexTpl的script标签

                    ]
                ]
                // ,where: {timestamp: (new Date()).valueOf()}
            })
        });
    }


</script>

</html>